<template>
  <div id="waitInduction" v-loading="loading">
    <div class="title">
      <div class="left">
        <div class="name">功能介绍</div>
        <div class="tips">设置后将影响新入职员工需填写的员工信息字段</div>
      </div>
      <div class="right">
        <el-button type="primary" @click="AddSetting" :loading="btnLoading">保存</el-button>
      </div>
    </div>
    <div class="tabels">
      <div class="left">
        <div class="lefttop">分组名称</div>
        <div class="groupList">
          <div @click="groupChange(index)" :class="groupIndex == index ? 'groupItem groupItem_active' : 'groupItem'" v-for="(item, index) in Setting" :key="index">{{ item.moduleName }}</div>
        </div>
      </div>
      <div class="right">
        <el-table :data="Setting[groupIndex]?.columns" style="width: 100%">
          <el-table-column prop="columnName" label="字段名称" width="180"> </el-table-column>
          <el-table-column prop="columnType" label="字段类型" width="180"> </el-table-column>
          <el-table-column>
            <template slot="header">
              <el-checkbox @change="all_show" ref="allShow" name="allShow">是否可见</el-checkbox>
            </template>
            <template slot-scope="{ row }">
              <el-checkbox v-model="row.isShow" :disabled="!row.isAllowEdit"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot="header">
              <el-checkbox @change="all_required" ref="allRequired" name="allRequired">是否必填</el-checkbox>
            </template>
            <template slot-scope="{ row }">
              <el-checkbox v-model="row.isRequired" :disabled="!row.isAllowEdit"></el-checkbox>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      btnLoading: false,
      //列配置
      Setting: [{ columns: [{}] }],
      //分组选择的index
      groupIndex: 0,
      //基础数据
      base: {
        isShow: false,
        isRequired: false,
      },
    };
  },
  mounted() {
    this.loading = true;
    this.GetEmployeeEntryColumnSetting();
  },
  methods: {
    AddSetting() {
      this.btnLoading = true;
      let dataParams = [];
      this.Setting.forEach((item) => {
        item.columns.forEach((column) => {
          dataParams.push({
            columnId: column.columnId,
            isShow: column.isShow,
            isRequired: column.isRequired,
          });
        });
      });
      this.$api.settingApi
        .SetEmployeeEntryColumnSetting(dataParams)
        .then((res) => {
          if (res.data.status == 200) {
            this.$message.success("添加成功");
          }
          this.btnLoading = false;
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
    GetEmployeeEntryColumnSetting() {
      this.$api.settingApi
        .GetEmployeeEntryColumnSetting()
        .then((res) => {
          if (res.data.status == 200) {
            this.loading = false;
            this.Setting = res.data.data;
            this.$refs.allShow.model = !this.Setting[this.groupIndex].columns.find((m) => !m.isShow);
            this.$refs.allRequired.model = !this.Setting[this.groupIndex].columns.find((m) => !m.isRequired);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    groupChange(index) {
      this.groupIndex = index;
      this.$refs.allShow.model = !this.Setting[this.groupIndex].columns.find((m) => !m.isShow);
      this.$refs.allRequired.model = !this.Setting[this.groupIndex].columns.find((m) => !m.isRequired);
    },
    all_show(e) {
      this.Setting[this.groupIndex].columns.forEach((item) => {
        if (item.isAllowEdit) {
          item.isShow = e;
        }
      });
    },
    all_required(e) {
      this.Setting[this.groupIndex].columns.forEach((item) => {
        if (item.isAllowEdit) {
          item.isRequired = e;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
#waitInduction {
  height: 100%;
  overflow: auto;
  .title {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: flex-end;

      .name {
        font-weight: 600;
        font-size: 16px;
      }
      .tips {
        font-size: 12px;
        color: #999999;
        margin-left: 6px;
      }
    }
    .right {
    }
  }
  .tabels {
    width: 100%;
    height: 90%;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    .left {
      width: 30%;
      height: 100%;
      border: 1px solid #ebeef1;
      .lefttop {
        background-color: #f5f8fd;
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding-left: 15px;
        font-weight: 500;
        font-size: 16px;
      }
      .groupList {
        height: calc(100% - 70px);
        overflow: auto;
        .groupItem {
          font-size: 14px;
          padding: 8px 0 8px 15px;
        }
        .groupItem_active {
          background-color: #ebeef1;
          cursor: pointer;
        }
        .groupItem:hover {
          background-color: #ebeef1;
          cursor: pointer;
        }
      }
    }
    .right {
      width: 68%;
      height: 100%;
      border: 1px solid #ebeef1;
    }
  }
}
</style>
